<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#FFFFFF',
		navigationBarTextStyle: 'black',
		backgroundColor: '#FFFFFF',
		navigationBarTitleText: '图书详情',
	},
}
</route>
<template>
	<view class="page-book-details">
		<scroll-view
			scroll-y
			:class="[
				'w-full',
				detailsInfo?.is_bookself === 0 || !userInfo.school_id ? 'details-info' : '',
			]"
			:style="{ height: '100vh' }"
			v-if="thisPage === 1"
		>
			<view class="w-full py-6 px-4 box-border">
				<view class="w-full flex justify-between items-center">
					<image :src="detailsInfo.cover_img" class="w-[243rpx] h-[286rpx] rounded-[25rpx]"></image>
					<view class="flex-1 pt-3 pb-2 pl-2 flex flex-col justify-between h-[286rpx] box-border">
						<view class="w-full flex flex-col">
							<text
								class="text-[#303030] text-[36rpx] font-bold"
								style="
									width: 428rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								"
								>{{ detailsInfo.name }}</text
							>
							<text class="text-[#919191] text-[24rpx] mt-2">{{ detailsInfo.author }}</text>
						</view>
						<view class="w-full">
							<text class="text-[#919191] text-[24rpx] inline-block"
								>出版社: {{ detailsInfo.publisher || '-' }}</text
							>
							<text class="text-[#919191] text-[24rpx] inline-block"
								>阅读对象: {{ detailsInfo.grade_name || '-' }}</text
							>
							<view
								class="mt-3 relative px-4 h-[38rpx] flex justify-center text-[#fff] text-[21rpx] items-center border-1 border-solid border-[#F1F1F1] rounded-[17rpx]"
								style="width: fit-content; background: #2ba5e0"
							>
								<view
									class="flex items-center mr-2"
									v-if="detailsInfo.finish_book_user_avatar.length"
								>
									<image
										class="w-[47rpx] h-[47rpx] -ml-[30rpx] border-1 border-solid border-[#fff] rounded-[50%]"
										v-for="item in detailsInfo.finish_book_user_avatar"
										:key="item"
										:src="item.avatar || baseImg + '/student4.png'"
									></image>
								</view>
								{{ detailsInfo.finish_book_user_count }}
								人读过</view
							>
						</view>
					</view>
				</view>

				<view class="w-full" v-if="detailsInfo.book_classify.length">
					<view class="text-[#303030] text-[33rpx] pb-3 pt-4 w-full pl-4 box-border font-bold"
						>阅前导读</view
					>
					<view
						class="w-full bg-white rounded-[25rpx] flex justify-between items-center px-4 py-4 box-border mb-2 last:mb-0 read-item"
						v-for="item in detailsInfo.book_classify"
						:key="item.id"
						@tap="toResource(item.id, item.ext)"
					>
						<text class="text-[#303030] text-[26rpx]">{{ item.name }}</text>
						<image
							class="w-[36rpx] h-[36rpx]"
							v-if="item.ext === 1"
							:src="baseImg + '/book/book-video.png'"
						></image>
						<image
							class="w-[36rpx] h-[36rpx]"
							v-if="item.ext === 2"
							:src="baseImg + '/book/book-music.png'"
						></image>
						<image
							class="w-[36rpx] h-[36rpx]"
							v-if="item.ext === 4"
							:src="baseImg + '/book/book-doc.png'"
						></image>
						<image
							class="w-[36rpx] h-[36rpx]"
							v-if="item.ext === 8"
							:src="baseImg + '/book/book-doc.png'"
						></image>
					</view>
				</view>

				<view class="w-full" v-if="detailsInfo.book_paper.length">
					<view class="pb-3 pt-4 w-full pl-4 box-border flex items-center">
						<text class="text-[#303030] text-[33rpx] pr-4 box-border inline-block font-bold"
							>阅后测练</text
						>
					</view>
					<view
						class="w-full bg-white rounded-[25rpx] px-4 py-4 box-border mb-2 last:mb-0 read-item relative"
						v-for="item in detailsInfo.book_paper"
						:key="item.id"
					>
						<view class="flex items-center">
							<text class="text-[#303030] text-[26rpx] font-bold">{{ item.name }}</text>
						</view>
						<rich-text class="text-[#5E5E5E] text-[22rpx] mt-4" :nodes="item.descript"></rich-text>
						<view class="flex items-center mt-[21rpx]">
							<view
								class="px-[27rpx] h-[56rpx] flex justify-center items-center rounded-[17rpx] mr-[22rpx]"
								style="background: #eeeeee"
								v-if="userInfo.class_list && userInfo.class_list.length"
								@tap="toDetails(item)"
							>
								<image
									class="w-[18rpx] h-[18rpx] mr-[12rpx]"
									:src="baseImg + '/book/book_xq_tw.png'"
								></image>
								<text class="text-[#5E5E5E] text-[22rpx]">学生测练情况</text>
							</view>
							<view
								class="px-[27rpx] h-[56rpx] flex justify-center items-center rounded-[17rpx]"
								style="background: #2ba5e0"
								@tap="toPaper(item)"
							>
								<image
									class="w-[18rpx] h-[18rpx] mr-[12rpx]"
									:src="baseImg + '/book/book_xq_shu.png'"
								></image>
								<text class="text-[#fff] text-[22rpx]">查看试题</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view
			v-if="thisPage === 1 && (detailsInfo?.is_bookself === 0 || !userInfo.school_id)"
			class="w-[100vw] fixed bottom-0 left-0 add-btn flex justify-center items-center"
		>
			<view class="w-[375rpx] relative h-[97rpx]" @tap="toSelf">
				<image
					class="w-full h-full absolute left-[50%] -translate-x-[50%] top-0 z-1"
					:src="baseImg + '/book/add-self.png'"
				></image>
				<view
					class="w-full h-full flex justify-center items-center absolute text-[#F4F7F4] text-[26rpx] left-[50%] -translate-x-[50%] top-0 z-2"
				>
					<image :src="baseImg + '/book/self-btn.png'" class="w-[33rpx] h-[33rpx] mr-2"></image>
					加入书架</view
				>
			</view>
		</view>
		<view class="w-full h-[100vh] absolute top-0 left-0 z-2 box-border" v-if="thisPage === 0">
			<no-page :btnTitle="btnTitle" :type="type" :title="title" @click="retry"></no-page>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { toAuthPage } from '@/utils/jump';
import { useUserStore } from '@/store';
import { getBookDetails, setBookSelf } from '@/service/book';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();
const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const detailsInfo = ref(null);
const title = ref('');
const type = ref('btn');
const btnTitle = ref('重试');
const thisPage = ref(-1);
const query = ref(null);

onLoad(options => {
	// id: 图书id
	// plan_id: 计划id
	if (!userInfo.value.school_id) {
		// 分享或者进入未登录
		thisPage.value = 0;
		type.value = 'btn';
		title.value = '还没有登录';
		btnTitle.value = '登录';
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		return;
	}
	if (options) {
		query.value = options;
		uni.setStorageSync('getCurrentPageUrlWithArgs', {
			type: '',
			url: '/pages-book/details/index?id=' + query.value.id,
		});
	} else {
		thisPage.value = 0;
		type.value = 'msg';
		title.value = '并未查询到该书籍,请返回重试';
	}
});

onShow(() => {
	if (query.value.id) {
		getDetailsInfo(query.value.id);
	}
});

const getDetailsInfo = async (id: number) => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getBookDetails({
			book_id: Number(id),
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			detailsInfo.value = res.data;
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};

const retry = () => {
	if (!userInfo.value.school_id) {
		// 分享或者进入未登录
		toAuthPage({}, { type: 'switchTab', url: '/pages/index/index' });
		return;
	}
	getDetailsInfo(query.value.id);
};

const toPaper = item => {
	let url = `/pages-book/exercise/index?id=${
		item.id
	}${query.plan_id ? `&plan_id=${query.plan_id}` : ''}`;
	uni.navigateTo({
		url,
	});
};

const toDetails = item => {
	let url = `/pages-book/exercise/details/index?id=${item.id}`;
	uni.navigateTo({
		url,
	});
};

const toResource = (id: number, ext: number) => {
	uni.navigateTo({
		url: `/pages-book/resource/index?resource_id=${id}&book_id=${query.value.id}&ext=${ext}`,
	});
};

const toSelf = async () => {
	if (!userInfo.value.school_id) {
		toAuthPage();
	} else {
		uni.showLoading({ title: '加入中...' });
		try {
			const res = await setBookSelf({
				book_id: Number(query.value.id),
			});
			uni.hideLoading();
			if (res.status_code === 200) {
				uni.showToast({
					icon: 'none',
					title: '添加成功',
				});
				retry();
			}
		} catch (error) {
			uni.hideLoading();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.page-book-details {
	.details-info {
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
	}

	.add-btn {
		padding-top: 21rpx;
		padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 21rpx);
	}

	.read-item {
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
	}
}
</style>
